import {Component, ViewChild, EventEmitter, Output, Input} from '@angular/core';
import {DateTime} from "ionic-angular";
import {TimeUtil} from "../../../model/util/TimeUtil";
import {DateService} from "../../../services/common/date.service";

/**
 * Generated class for the TimeFilterComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
    selector: 'time-filter',
    templateUrl: 'time-filter.html',
    providers: [DateService]
})
export class TimeFilterComponent {
    @ViewChild('startTime') startDatetimePicker: DateTime;
    @ViewChild('endTime') endDatetimePicker: DateTime;
    @ViewChild('filterTime') filterTimetimePicker: DateTime;

    yearList: any[] = [];
    /**
     * 默认宣示月份
     * @type {any}
     */
    @Input() initialValue: string = TimeUtil.getLocalTime(Date.now());

    /**
     * 时间选择类型
     * 1. 时间范围（默认）
     * 2. 单个时间
     */
    @Input() filterType: number = 1;

    /**
     * 时间（类型为2）
     */
    @Input() filterDate = '';

    /**
     * 改变时间触发事件（类型为2）
     * @type {EventEmitter<string>}
     */
    @Output() filterDateChange = new EventEmitter<string>();

    /**
     * 开始时间（类型为1）
     */
    @Input() startDate = '';

    /**
     * 改变开始时间触发事件（类型为1）
     * @type {EventEmitter<string>}
     */
    @Output() startDateChange = new EventEmitter<string>();

    /**
     * 结束时间（类型为1）
     */
    @Input() endDate = '';

    /**
     * 改变结束时间触发事件（类型为1）
     * @type {EventEmitter<string>}
     */
    @Output() endDateChange = new EventEmitter<string>();

    /**
     * 点击查询触发事件
     * @type {EventEmitter<string>}
     */
    @Output() query = new EventEmitter<string>();
    // 时间组件文字填充
    private pickerOptions = {
        cssClass: 'schedule-add-picker'
    };

    constructor(private dateService: DateService) {
        this.yearList = this.dateService.getYearList(1900, 2100);
    }


    /**
     * 选择开始时间
     */
    openStartTimePicker() {
        this.startDatetimePicker.open();
        if (this.filterType === 1) {
            //this.startDatetimePicker._picker.addButton({text: '请选择开始时间', cssRole: 'information'});
        } else {
            //this.startDatetimePicker._picker.addButton({text: '请选择时间', cssRole: 'information'});
        }
        this.startDatetimePicker.registerOnChange(data => {
            this.startDate = data;
        })
    }

    /**
     * 选择结束时间
     */
    openEndTimePicker() {
        this.endDatetimePicker.open();
        //this.endDatetimePicker._picker.addButton({text: '请选择结束时间', cssRole: 'information'});
        this.endDatetimePicker.registerOnChange(data => {
            this.endDate = data;
        });
    }

    /**
     * 选择时间
     */
    openFilterTimePicker() {
        this.filterTimetimePicker.open();
        //this.filterTimetimePicker._picker.addButton({text: '请选择时间', cssRole: 'information'});
        this.filterTimetimePicker.registerOnChange(data => {
            this.filterDate = data;
        });
    }


    /**
     * 查询
     */
    click() {
        if (this.filterType === 1) {
            this.startDateChange.emit(this.startDate);
            this.endDateChange.emit(this.endDate);
        } else {

            this.filterDateChange.emit(this.filterDate);
        }
        this.query.emit();

    }

}
